@import "../../style/index.less";

@pre: ~"giui-tag";

.@{pre} {
  &- {
    .baseNodeStyle();
    font-size: 12px;
    margin: 0 8px 0 0;
    padding: 0 7px;
    display: inline-block;
    background: #fafafa;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    line-height: 20px;
    transition: all 0.3s;
    vertical-align: text-bottom;
    cursor: pointer;

    &.@{pre}-magenta {
      color: #c41d7f;
      background: #fff0f6;
      border-color: #ffadd2;
    }
    &.@{pre}-red {
      color: #cf1322;
      background: #fff1f0;
      border-color: #ffa39e;
    }
    &.@{pre}-volcano {
      color: #d4380d;
      background: #fff2e8;
      border-color: #ffbb96;
    }
    &.@{pre}-orange {
      color: #d46b08;
      background: #fff7e6;
      border-color: #ffd591;
    }
    &.@{pre}-gold {
      color: #d48806;
      background: #fffbe6;
      border-color: #ffe58f;
    }
    &.@{pre}-lime {
      color: #7cb305;
      background: #fcffe6;
      border-color: #eaff8f;
    }
    &.@{pre}-green {
      color: #389e0d;
      background: #f6ffed;
      border-color: #b7eb8f;
    }
    &.@{pre}-cyan {
      color: #08979c;
      background: #e6fffb;
      border-color: #87e8de;
    }
    &.@{pre}-blue {
      color: #096dd9;
      background: #e6f7ff;
      border-color: #91d5ff;
    }
    &.@{pre}-geekblue {
      color: #1d39c4;
      background: #f0f5ff;
      border-color: #adc6ff;
    }
    &.@{pre}-purple {
      color: #531dab;
      background: #f9f0ff;
      border-color: #d3adf7;
    }

    a {
      color: auto;
    }
  }
}
